/**
 * Created by wangyin on 2017/11/16.
 */
define([
    'echarts'
], function (require, exports) {
    // page加载完成后调用ready方法
    exports.ready = function (hashCode, data, cite) {
        yufp.lookup.reg('USE_MONITOR_RESOURCE_TYPE,USE_MONITOR_PRECISION_TYPE');
        yufp.custom.vue({
            el: cite.el,
            data: function () {
                var _this = this;
                return {
                    currentNodeId: data.addressIp,
                    intervalSelection: 60000,
                    currentTabId: cite.rootId,
                    currentShowPic: "statics",
                    buttonViewName: "列表监控",     //图标监控
                    currentDateTime: "",
                    buttonViewType: "yx-table2", //  yx-pie-chart
                    baseParams: { condition: { resourceAddr: data.addressIp } },
                    staticObjects: [],
                    searchFormdata: {},
                    refreshIntervalOptions: [{ key: '864000000', label: '不自动刷新' },
                    { key: 10000, label: '10秒' },
                    { key: 20000, label: '20秒' },
                    { key: 30000, label: '30秒' }, {
                        key: 60000,
                        label: '60秒'
                    }],
                    logDateUrl: 'api/use/monitor/resources/resourceLog',
                    queryFields: [
                        { placeholder: '精度', field: 'precision', type: 'select', dataCode: "USE_MONITOR_PRECISION_TYPE", value: "H" },
                        { placeholder: '资源名称', field: 'resourceCode', type: 'select', dataCode: "USE_MONITOR_RESOURCE_TYPE" },
                        { placeholder: '开始时间', field: 'beginTime', type: 'date' },
                        { placeholder: '结束时间', field: 'endTime', type: 'date' },
                    ],
                    queryButtons: [
                        {
                            label: '搜索', op: 'submit', type: 'primary', click: function (model, valid) {
                                model.resourceAddr = data.addressIp;
                                var param = { condition: JSON.stringify(model) };
                                _this.$refs.logRefTable.remoteData(param);
                            }
                        },
                        { label: '重置', op: 'reset' }
                    ]
                }
            },
            watch: {
                intervalSelection(val) {
                    var _this = this;
                    clearInterval(_this.setIntervalId);
                    _this.setIntervalId = setInterval(() => {
                        _this.queryResourceStaticInfo(_this.currentNodeId, false);

                    }, _this.intervalSelection);
                }
            },
            mounted: function () {
                this.queryResourceStaticInfo(this.currentNodeId, false);
                this.scheduletrigger();
                this.cpuHisFlag = false;
                this.currentShowPic = "statics";
                this.buttonViewName = "列表监控";
                this.buttonViewType = "yx-table2";
            },
            destroyed: function() {
                clearInterval(this.setIntervalId);
            },
            methods: {
                refreshData: function () {
                    this.queryResourceStaticInfo(this.currentNodeId, true);
                },
                scheduletrigger: function () {
                    var _this = this;
                    _this.setIntervalId = setInterval(() => {
                        _this.queryResourceStaticInfo(_this.currentNodeId, false);
                    }, _this.intervalSelection);
                },
                checkViewType: function () {
                    if (this.currentShowPic === 'statics') {
                        this.currentShowPic = "list";
                        this.buttonViewName = "图形监控";
                        this.buttonViewType = "yx-pie-chart";
                    } else {
                        this.currentShowPic = "statics";
                        this.buttonViewName = "列表监控";
                        this.buttonViewType = "yx-table2";
                        this.cpuHisFlag = false;
                        // this.initChart();
                    }
                },
                reback: function () {
                    yufp.frame.removeTab(cite.rootId.substr(7))
                    //yufp.frame.removeTab(this.currentTabId);
                },
                queryResourceStaticInfo: function (addressIP, flag) {
                    var _this = this;
                    var param = { addressIp: addressIP };
                    yufp.service.request({
                        url: backend.useService + '/monitor/resources/queryStaticsList',
                        method: 'get',
                        data: param,
                        callback: function (code, message, response) {
                            if (code == 0) {
                                _this.currentDateTime = response.message;
                            }
                            if (response && response.data) {
                                if (response.data.length > 0) {
                                    _this.staticObjects.splice(0);
                                    for (let i = 0; i < response.data.length; i++) {
                                        if (response.data[i].addressIp == data.addressIp) {
                                            _this.staticObjects.push(response.data[i]);
                                        }
                                    }
                                }
                                _this.$nextTick(function () {
                                    _this.initChart(_this.staticObjects);
                                    if (flag) {
                                        _this.$message("刷新成功");
                                    }
                                });
                            }
                        }
                    });
                },
                initChart: function (datas) {
                    for (var idx = 0; idx < datas.length; idx++) {
                        var CPUChart = echarts.init(document.getElementById(datas[idx].chartId));
                        var cpuLineChart = echarts.init(document.getElementById(datas[idx].lineChartId));
                        var cpuLineChart100 = echarts.init(document.getElementById(datas[idx].cineChart100Id));
                        CPUChart.setOption(this.getPieOpt(datas[idx]));
                        cpuLineChart.setOption(this.getLineOption(datas[idx]));
                        cpuLineChart100.setOption(this.getLineOption100(datas[idx]));
                        datas[idx].firstShowHis = false;
                    }
                },
                getPieData: function (data) {
                    return seriesData;
                },
                historyStatic: function (obj) {
                    obj.showHisFlag = !obj.showHisFlag;
                    /* if(obj.showHisFlag){
                         this.queryResourceStaticInfoHis(obj);
                     }else{
                         this.queryResourceStaticInfo(obj.addressIp);
                     }*/

                },
                getPieOpt: function (data) {
                    var seriesData = [{ name: '未使用', value: 0 }, { name: '使用', value: 0 }];
                    seriesData[0].value = data.listPie[0];
                    seriesData[1].value = data.listPie[1];
                    return {
                        title: {
                            text: '当前状态:' + data.resourceState,
                            x: 'center',
                            y: 'bottom',
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{b} : {c} ({d}%)"
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            left: 5,
                            top: 20,
                            bottom: 20,
                            data: ['未使用', '使用']
                        },
                        series: [
                            {
                                name: '使用率',
                                type: 'pie',
                                radius: '80%',
                                center: ['50%', '50%'],
                                data: seriesData,
                                label: {
                                    normal: {
                                        position: 'inner',
                                        show: false
                                    }
                                },
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    normal: {
                                        color: function (params) {
                                            //自定义颜色
                                            var colorList = ['#47DB47', '#EE0000'
                                            ];
                                            return colorList[params.dataIndex]
                                        }
                                    }
                                }
                            }
                        ]
                    };
                },
                getLineOption100: function (data) {
                    return {
                        title: {
                            text: '时间趋势图',
                            x: 'center',
                            y: 'bottom',
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b}<br/> ' +
                                '{a0}:{c0}%<br/>' +
                                '{a1}:{c1}%<br/>' +
                                '{a2}:{c2}%'
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.hisHStrList,
                            show: true,
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: ''
                            },
                        },
                        yAxis: {
                            type: 'value',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value}%'
                            },
                            // show: true
                        },
                        series: [
                            {
                                name: '最大值',
                                type: 'line',
                                smooth: true,
                                data: data.hisHMaxValueList,
                            },
                            {
                                name: '平均值',
                                type: 'line',
                                smooth: true,
                                data: data.hisHAvgValueList,
                            },
                            {
                                name: '最小值',
                                type: 'line',
                                smooth: true,
                                data: data.hisHMinValueList,
                            }
                        ]
                    };
                },

                getLineOption: function (data) {
                    return {
                        title: {
                            text: '时间趋势图',
                            x: 'center',
                            y: 'bottom',
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b}<br/> ' +
                                '{a0}:{c0}%<br/>' +
                                '{a1}:{c1}%<br/>' +
                                '{a2}:{c2}%'
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.hisStrList,
                            show: true,
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: ''
                            },
                        },
                        yAxis: {
                            type: 'value',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value}%'
                            },
                            // show: true
                        },
                        series: [
                            {
                                name: '最大值',
                                type: 'line',
                                smooth: true,
                                data: data.hisMaxValueList,
                            },
                            {
                                name: '平均值',
                                type: 'line',
                                smooth: true,
                                data: data.hisAvgValueList,
                            },
                            {
                                name: '最小值',
                                type: 'line',
                                smooth: true,
                                data: data.hisMinValueList,
                            }
                        ]
                    };
                }
            }
        });
    };
});